<script setup lang="ts">
import {middleBottomTwo} from "@/api/modules";
import SeamlessScroll from "@/components/seamless-scroll";
import { computed, onMounted, reactive } from "vue";
import { useSettingStore } from "@/stores";
import { storeToRefs } from "pinia";
import EmptyCom from "@/components/empty-com";
import { ElMessage } from "element-plus";

const settingStore = useSettingStore();
const { defaultOption, indexConfig } = storeToRefs(settingStore);
const state = reactive<any>({
  list: [],
  defaultOption: {
    ...defaultOption.value,
    singleHeight: 233,
    limitScrollNum: 5,
    // step:3
  },
  scroll: true,
});

const getData = () => {
  middleBottomTwo({ })
    .then((res) => {
      console.log("中下右", res);
      state.list = res;
      // if (res.success) {
      //
      // } else {
      //   ElMessage({
      //     message: res.msg,
      //     type: "warning",
      //   }
    })
};

const comName = computed(() => {
  if (indexConfig.value.leftBottomSwiper && state.list.length>(state.defaultOption.limitScrollNum-1)) {
    return SeamlessScroll;
  } else {
    return EmptyCom;
  }
});
function handlePM(val: any) {
  // console.log(val);
  return val.toString().padStart(2, '0');
}
const handleAddress = (item: any) => {
  return `${item.provinceName}/${item.cityName}/${item.countyName}`;
};
onMounted(() => {
  getData();
});
</script>

<template>
  <div class="right_bottom_wrap beautify-scroll-def" :class="{ 'overflow-y-auto': !indexConfig.leftBottomSwiper }">
    <component :is="comName" :list="state.list" v-model="state.scroll" :singleHeight="state.defaultOption.singleHeight"
      :step="state.defaultOption.step" :limitScrollNum="6 || state.defaultOption.limitScrollNum"
      :hover="state.defaultOption.hover" :singleWaitTime="state.defaultOption.singleWaitTime"
      :wheel="state.defaultOption.wheel">
      <ul class="right_bottom">
        <li class="right_center_item" :style="`background-color:${i % 2 ? '#022D58' : '#071731'} ;`" v-for="(item, i) in state.list" :key="i">
          <div  class="contetn_center-bottom-right">
            <div>{{ i + 1 }}</div>
            <div>{{ item.company_name }}</div>
            <div>{{ item.expert_count }}</div>
          </div>
        </li>
      </ul>
    </component>
  </div>
</template>

<style scoped lang="scss">
.right_bottom {
  width: 100%;
  height: 100%;

  .right_center_item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
    font-size: 14px;
    color: #fff;

    .orderNum {
      margin: 0 20px 0 -20px;
    }

    .contetn_center-bottom-right{
        width: 100%;
        display: flex;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
        color: #A4C6E6;
        >div:nth-child(1){
          width: 15%;
        }
        >div:nth-child(2){
          width: 60%;
        }
        >div:nth-child(3){
          width: 25%;
        }
      }

  }
}

.right_bottom_wrap {
  overflow: hidden;
  width: 100%;
  height: 226px;
}

.overflow-y-auto {
  overflow-y: auto;
}
</style>
